<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			dd{
				margin-left: 0px;
				display: none;
				border-top: 1px solid gainsboro;
			}
			.ddCls{
				margin-left: 0px;
				/*display: none;*/
				border-top: 1px solid gainsboro;
			}
			.dlCls{
				line-height: 28px;
				background-color: white;
				border: 1px solid gainsboro;
				width: 80px;
				text-align: center;
				position: absolute;
				top: -5px;
				right: 312px;
				z-index: 88;
			}
			#box_main{
				width: 100%;
				height: 100px;
				border-bottom: 1px solid gainsboro;
			}
			#box_right p,dl{
				font-size: 14px;
				text-align: center;
				float: left;
				margin-left: 40px;
			}
			#box_left{
				float: left;
				margin-right: 500px;
				margin-left: 300px;
			}
			p{
				color: gray;	
			}
			p a{
				text-decoration: none;
				color: #0066cc;
			}
			a{
				cursor: pointer;
			}
			a:hover{
				color: red;
			}
			p a:hover{
				color: orangered;
			}
		</style>
	</head>
	<body>
		<div id="box_main">
			<div id="box_left">
				<a id="actionPageHome">
					<img src="img/header_img/loginlogo.jpg" title="一号店" />
				</a>
			</div>
			<div id="box_right">
				<p>
					您好，欢迎光临1号店！ 	<a id="activeLogin" >请登录</a>
				</p>
				<dl>
					<dt><a>帮助中心</a></dt>
					<dd><a>包裹跟踪</a></dd>
					<dd><a>常见问题</a></dd>
					<dd><a>在线退换货</a></dd>
					<dd><a>在线投诉</a></dd>
				</dl>
			</div>
		</div>
		
		<script type="text/javascript" src="js/jquery-3.2.1.js" ></script>
		<script>
			$(function(){
				$('dt,dd').hover(
					function(){
						$('dd').addClass('ddCls');
						$('dl').addClass('dlCls');
						$('dd').show();
					},
					function(){
						$('dd').removeClass('ddCls');
						$('dl').removeClass('dlCls');
						$('dd').hide();
					}
				);
				$('#activeLogin').click(function(){
					window.location = 'login.jsp';
				});
				$('#actionPageHome').click(function() {
					window.location = "search.goods?likeword=";
				});
			});
		</script>
	</body>
</html>
